<template>
	<view class="root">
		<view class="top">
			<commentList :item="replyItem" :displayDelete="false" :topTypeNum="topTypeNum"></commentList>
		</view>
		<u-empty class="icon" v-if="!dataList.length" mode="comment"
			icon="http://cdn.uviewui.com/uview/empty/comment.png">
		</u-empty>
		<view class="center" v-else>
			<view class="list" v-for="(item,index) in dataList">
				<commentList :typeNum="typeNum" :item="item" :authorComment="authorComment[index]"
					@deleteComment="PdeleteComment">
				</commentList>
			</view>
		</view>
		<!-- 别多加data了 -->
		<talkInput :placeholder="`回复:${replyItem.user.nickname}`" :commentObj="commentObj" @commentEnv="Pcomment">
		</talkInput>
	</view>
</template>
<script>
	import {
		GetStroage,
		getProvince
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				replyItem: null, //声明对象可以这样搞
				dataList: [],
				commentObj: {
					postid: "",
					type: 1, //二级回复用1
					uid: "",
					province: "",
					replyUid: "",
					replyCommentId: ""
				},
				userInfo: {},
				authorComment: [],
				typeNum: 1,//表明是二级评论
				topTypeNum:0,//二级评论的首条不能点击,0表示不能去reply
			};
		},
		onLoad() {
			let reply = uni.getStorageSync("reply");
			if (!reply) {
				return uni.navigateBack();
			}
			this.replyItem = reply || {}; //包括缓存不存在为空
			this.userInfo = GetStroage("userInfo");
			this.commentObj.postid = reply.postid;
			this.commentObj.uid = this.userInfo.id;
			getProvince().then(res => {
				this.commentObj.province = res;
			});
			this.commentObj.replyUid = reply.uid;
			this.commentObj.replyCommentId = reply.id;
			this.getAllSecondCommment(reply.postid, reply.id);
		},
		onUnload() { //离开页面
			uni.removeStorage({
				key: "reply"
			})
		},
		methods: {
			async getAllSecondCommment(id1, id2) {
				await this.getUserComment(this.replyItem.postid, this.userInfo.id);
				uni.request({
					url: this.$e.Url + "/user/getAllSecondCommment",
					data: {
						postId: id1,
						replyCommentId: id2
					},
					header: {
						"Content-Type": "application/json"
					},
					method: "GET",
					success: (res) => {
						console.log("请求API接口【/user/getAllSecondCommment】", res);
						this.dataList = res.data;
						this.dataList.map(item => {
							this.$set(item, "author", false);
						});
						for (let index = 0; index < res.data.length; index++) {
							for (let j = 0; j < this.authorComment.length; j++) {
								if (res.data[index].uid == this.authorComment[j].uid) {
									this.dataList[index].author = true;
								}
							}
						}
					}
				})
			},
			Pcomment(e) { //评论成功的回调
				this.dataList.unshift({
					...e,
					...this.commentObj,
					user: this.userInfo
				})
			},
			PdeleteComment(e) { //只是回调,操作在commentList里面进行
				let index = this.dataList.findIndex(item => {
					return item.id == e //注意这里是==
				});
				this.dataList.splice(index, 1); //1表示删除
			},
			getUserComment(index, id) { //获取用户在该帖子下的评论列表
				return new Promise((resolve, reject) => { //异步同步化
					uni.request({
						url: this.$e.Url + "/user/getUserComment",
						data: {
							postid: index,
							uid: id
						},
						method: "POST",
						header: {
							"Content-Type": "application/json"
						},
						success: (ans) => {
							console.log("请求API接口【/user/getUserComment】", ans);
							this.authorComment = ans.data;
							resolve('suc');
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	.root {
		.top {
			background-color: #ffffff;
			padding: 30rpx;
			// margin: 30rpx;
			border-bottom: 15rpx solid #eeeeee;
		}

		.center {
			background: #ffffff;
			// margin: 0 30rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			box-shadow: 0 0 10rpx 10rpx rgba(199, 203, 212, 0.3);
			padding-bottom: 120rpx;

			.list {
				padding: 10rpx;
				border-bottom: 1rpx solid #F1F2F2;


				&:last-child {
					//最后一条评论不要底边
					border-bottom: 0rpx;
				}
			}
		}

	}
</style>
